<template>
	<view class="uni_box home">
		<navbar :title="navbarName" :yin="true">
			<view class="hright" slot="right">
				<image class="xiazai" src="@/pages_subject/static/img/xiazai.png" mode="" />
			</view>
		</navbar>
		<view class="content">
			<CcVideo :vid="currentVid" />
			<view class="sone">
				<view class="tab-wrap" v-for="bar in tabbarList" :key="bar.value">
					<view class="soneitem" :class="currentTab===bar.value ? 'sactive' : ''" @click="onChangeTabBar(bar.value)">
						<text class="ziname">{{bar.label}}</text>
						<text class="xian"></text>
					</view>
					<view class="shu"></view>
				</view>

			</view>
			<view class="slist" v-if="currentTab===1">
				<view class="sitem" v-for="(item, index) in videoList" :key="index" @click="onClickCourse(item)">
					<view class="sright">
						<text class="vtit">{{ index + 1 }}.{{ item.title }}</text>
						<view class="time-wrap" v-if="item.type===1">
							<image class="bf" src="/static/playing.png" v-if="courseId === item.course_id" />
							<image class="bf" src="/static/replay.png" v-else />
							<text class="vtime">{{item.duration}}</text>
						</view>
						<view class="test-btn" v-if="item.type===2">
							测一测
						</view>
					</view>
				</view>
			</view>

			<view class="slist ziview" v-if="currentTab===3">
				<view class="sitemtwo" v-for="(item, index) in fileList" :key="index">
					<image class="vgou" src="@/pages_subject/static/img/vgou.png" mode="" />
					<image class="vpdf" src="@/pages_subject/static/img/vpdf.png" mode="" />
					<text class="gutit txt">{{ index + 1 }}.{{ item.title }}</text>
				</view>
			</view>

			<view class="botgou" v-if="currentTab===3">
				<image class="vgou" src="@/pages_subject/static/img/vgou.png" mode="" />
				<text class="quan">全选</text>
				<view class="xiazai" style="margin-left: auto">下载</view>
				<view class="quxiao">取消</view>
			</view>

			<!-- 问答列表 -->
			<view class="answer-list" v-if="currentTab===2">
				<view class="switch-wrap">
					<view :class="{'active-title':answerType==='all'}" @click="onSwitchAnswer('all')">全部问题</view>
					<view :class="{'active-title':answerType==='my'}" @click="onSwitchAnswer('my')">我的</view>
				</view>
				<!-- 列表 -->
				<AnswerList :list="answerList" />
			</view>

			<view class="botgou" v-if="currentTab===2">
				<view class="input-wrap" @click="goQuestionPage(0)">
					<view class="question-text">我要提问....</view>
					<view class="question-btn">发送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CcVideo from "../../../components/CcVideo/CcVideo.vue";
	import AnswerList from './components/AnswerList.vue'
	export default {
		components: {
			CcVideo,
			AnswerList
		},
		data() {
			return {
				navbarName: "",
				videoList: [],
				fileList: [],
				currentVid: '',
				tabbarList: [{
					label: '目录',
					value: 1
				}, {
					label: '提问',
					value: 2
				}, {
					label: '讲义',
					value: 3
				}],
				currentTab: 1,
				currentDay: '',
				answerType: 'all', //all:全部问题 my:我的
				courseId: '',
				answerList: []
			};
		},
		onLoad(options) {
			const {
				day,
			} = options;
			this.currentDay = day

		},
		onShow() {
			this.initData()
		},
		methods: {
			initData() {
				if (this.currentTab === 1) {
					this.getTaskListForDay()
				} else if (this.currentTab === 2) {
					this.getQuestionListByCourse()
				} else if (this.currentTab === 3) {
					this.getFileList()
				}
			},
			onChangeTabBar(e) {
				this.currentTab = e
				this.initData()
			},

			onSwitchAnswer(e) {
				this.answerType = e
				this.getQuestionListByCourse()
			},
			goQuestionPage(qid) {
				this.navrouter(
					`/pages_subject/twoPage/ZhikePage/Question?courseId=${this.courseId}&qid=${qid}`
				);
			},
			// 获取目录
			async getTaskListForDay() {
				const res = await this.$u.api.getTaskListForDay({
					combo_id: '',
					day: this.currentDay
				});
				this.videoList = res;
			},
			onClickCourse(e) {
				if (e.type === 1) {
					// 获取视频信息->播放
					this.getVideoInfo(e.course_id)
					this.courseId = e.course_id
				}
			},
			// 获取视频信息
			async getVideoInfo(course_id) {
				const videoInfo = await this.$u.api.getVideoInfo({
					combo_id: '',
					course_id
				})
				this.currentVid = videoInfo.vid
				this.navbarName = videoInfo.title
			},

			// 获取资料
			async getFileList() {
				const res = await this.$u.api.getJiangyiList({
					combo_id: '',
					day: this.currentDay
				});
				this.fileList = res;
			},

			// 获取视频问答
			async getQuestionListByCourse() {
				const res = await this.$u.api.getQuestionListByCourse({
					type: this.answerType,
					course_id: this.courseId,
					page: 1
				})
				this.answerList = res.list || []
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.test-btn {
		width: 134rpx;
		height: 47rpx;
		background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 24rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 47rpx;
	}

	.xiazai {
		width: 27rpx;
		height: 27rpx;
	}

	.content {
		background-color: #fff;
		padding-bottom: 150rpx;

		.videClass {
			height: 500rpx;
			position: relative;
			width: 100%;
		}

		.sone {
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 4rpx solid #eeeeee;

			.tab-wrap {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
			}

			.soneitem {
				// width: 50%;
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				position: relative;
				justify-content: center;

				.ziname {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				.xian {
					position: absolute;
					width: 40%;
					left: 30%;
					bottom: 0;
					height: 4rpx;
					background: linear-gradient(-90deg, #fa4e4e, #fd894f);
					border-radius: 2rpx;
					display: none;
				}
			}

			.sactive {
				.xian {
					display: inline-block;
				}

				.ziname {
					color: rgba(241, 123, 19, 1);
				}
			}

			.shu {
				width: 1rpx;
				height: 38rpx;
				background-color: #cccccc;
				opacity: 0.7;
			}
		}

		.slist {
			.sitem {
				display: flex;
				flex-direction: row;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;

				.vgou {
					width: 26rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				.bf {
					width: 25rpx;
					height: 25rpx;
					margin-right: 20rpx;
				}

				.sright {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.vtit {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
					}

					.time-wrap {
						display: flex;
						align-items: center;
					}

					.vtime {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}

			.sitemtwo {
				display: flex;
				flex-direction: row;
				padding: 30rpx;
				border-bottom: 1rpx solid #eee;
				align-items: center;

				.vgou {
					width: 26rpx;
					height: 26rpx;
					margin-right: 50rpx;
				}

				.vpdf {
					width: 20rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				.gutit {
					width: 80%;
					display: inline-block;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
				}
			}
		}

		.ziview {}
	}

	.botgou {
		position: fixed;
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		box-shadow: 0rpx 3rpx 18rpx 0rpx #f0f0f0;
		padding: 0 30rpx;
		bottom: 0;
		z-index: 100;

		.vgou {
			width: 26rpx;
			margin-right: 20rpx;
			height: 26rpx;
		}

		.quan {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #f06103;
		}

		.xiazai {
			margin-left: 50rpx;
			width: 144rpx;
			height: 52rpx;
			background: #f06103;
			border-radius: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #ffffff;
		}

		.quxiao {
			margin-left: 50rpx;
			width: 144rpx;
			height: 52rpx;
			background: #e8433a;
			border-radius: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #ffffff;
		}

	}

	.switch-wrap {
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		padding-top: 45rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #6F7B84;
		padding-bottom: 10rpx;

		>view {
			&:first-child {
				margin-right: 54rpx;
			}
		}

		.active-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx !important;
			color: #F06103 !important;
		}
	}

	.input-wrap {
		width: 100%;
		height: 70rpx;
		background: #FEF7F2;
		border-radius: 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 10rpx;

		>.question-text {

			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8A857C;

		}

		>.question-btn {
			width: 100rpx;
			height: 50rpx;
			background: linear-gradient(-90deg, #FA4E4E, #FD894F);
			border-radius: 25rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 50rpx;
		}
	}
</style>